<template>
  <div id="journey">
    <header>
      <div class="heng">
        <img src="../../assets/zyzImg/heng.png" alt="" />
      </div>
      <h2>我的行程</h2>
      <div class="myroute">
        <van-cell title="我的旅行路线" value="创建行程" @click="noShow" />
        <img src="../../assets/zyzImg/bg2.png" alt="" />
        <van-cell title="" value="查看历史行程" @click="isShow" />
        <div class="detail">
          <h3>上海-北京之旅</h3>
          <p>共2天 五个游玩景点 | 随时出发</p>
        </div>
      </div>
    </header>
    <!-- 历史行程 -->
    <div v-if="show">
      <div class="history" v-for="item in historyList" :key="item.time">
        <div>
          <span>下一站</span>
          <em>{{ item.name }}</em>
          <i>出行时间：{{ item.time }}</i>
        </div>
      </div>
    </div>
    <!-- 创建行程 -->
    <ul v-else>
      <li v-for="item in ticket" :key="item.id">
        <div class="imgbox"><img :src="item.url" alt="" /></div>
        <div class="place">
          <h3>{{ item.place }}</h3>
          <p>{{ item.title }}</p>
          <p>{{ item.time }}</p>
        </div>
        <div class="btn">
          <button @click="addPlace(item)">添加</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { ref } from "vue";
import { Icon, Cell, CellGroup, Dialog } from "vant";
export default {
  name: "Journey",
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.name]: Dialog,
  },
  setup() {
    const ticket = [
      {
        id: 1,
        url: require("@/assets/zyzImg/t1.png"),
        place: "上海->杭州",
        title: "江南美景",
        time: "2021.11.20",
      },
      {
        id: 2,
        url: require("@/assets/zyzImg/t2.png"),
        place: "杭州->广东",
        title: "江南美景",
        time: "2021.11.21",
      },
      {
        id: 3,
        url: require("@/assets/zyzImg/t3.png"),
        place: "成都->杭州",
        title: "江南美景",
        time: "2021.11.22",
      },
      {
        id: 4,
        url: require("@/assets/zyzImg/t4.png"),
        place: "上海->苏州",
        title: "江南美景",
        time: "2021.11.23",
      },
    ];
    let show = ref(false);
    const isShow = function () {
      show.value = true;
    };
    const noShow = function () {
      show.value = false;
    };
    const historyList = ref([
      {
        name: "上海->杭州",
        time: "2021.10.21",
      },
    ]);
    const addPlace = function (value) {
      Dialog.confirm({
        title: "添加行程",
        message: value.place,
      })
        .then(() => {
          // on confirm
          historyList.value.push({ name: value.place, time: value.time });
        })
        .catch(() => {
          // on cancel
        });
    };
    return {
      ticket,
      show,
      isShow,
      noShow,
      addPlace,
      historyList,
    };
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
#journey {
  header {
    padding: 10px;
    background-image: url("../../assets/zyzImg/bg3.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 -10px;
    .heng {
      width: 30px;
      height: 20px;
      img {
        width: 100%;
      }
    }
    h2 {
      margin: 20px 0 15px;
      font-size: 25px;
    }
    .myroute {
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 0 2px #ccc;
      position: relative;
      /deep/ .van-cell__title {
        padding: 10px;
        span {
          font-size: 20px;
          font-weight: 600;
        }
      }
      /deep/ .van-cell__value {
        padding: 10px;
      }
      img {
        display: block;
        width: 100%;
        background-image: url("../../assets/zyzImg/bg.png");
        background-size: 100%;
      }
      .detail {
        position: absolute;
        top: 50px;
        color: #eee;
        h3 {
          font-size: 20px;
          margin: 10px;
        }
        p {
          font-size: 16px;
          text-indent: 10px;
        }
      }
    }
  }
  // 历史行程
  > ul {
    padding: 10px;
    li {
      padding: 10px;
      display: flex;
      box-shadow: 1px 1px 3px #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
      .imgbox {
        width: 150px;
        img {
          width: 100%;
        }
      }
      .place {
        width: 150px;
        margin: 10px;
        h3 {
          font-size: 19px;
          text-align: center;
        }
        p {
          text-align: center;
          font-size: 16px;
          color: #909090;
        }
      }
      .btn {
        margin-top: 20px;
        button {
          font-size: 16px;
          border-radius: 10px;
          width: 55px;
          height: 30px;
          background-color: #46aef7;
          border: 0;
          color: #fff;
        }
      }
    }
  }
  .history {
    font-size: 16px;
    color: #909090;
    margin: 10px;
    > div {
      padding: 10px;
      box-shadow: 1px 1px 3px #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
      position: relative;
      em {
        font-style: normal;
        font-weight: 800;
        font-size: 19px;
        color: #000;
        margin-left: 80px;
      }
      i {
        position: absolute;
        font-style: normal;
        font-size: 14px;
        bottom: 2px;
        right: 2px;
      }
    }
  }
}
</style>
